<template>
  <div id="MapEcharts" :style="{ width: '50%', height: '100%' }" class="com-map" ref="map_ref"></div>
</template>

<script>
import * as echarts from "echarts";
import china from "@/assets/china.json";

export default {
  name: "map_1",

  data() {
    return {
      time: null,
      chartInstance: null,
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },

  methods: {
    initChart() {
      this.chartInstance = echarts.init(document.getElementById("MapEcharts"));
    },
    async getData() {
      await this.updateChart();
    },
    updateChart() {
      // 初始化中国地图
      echarts.registerMap("china", china);
      const geoCoordMap = {
        '长春': [125.8154, 44.2584],
        '长沙': [113.0823, 28.2568],
        '贵阳': [106.6992, 26.7682],
        '西安': [109.1162, 34.2004],
        '深圳': [114.5435, 22.5439],
        '济南': [117.1582, 36.8701],
        '海口': [110.3893, 19.8516],
        '沈阳': [123.1238, 42.1216],
        '武汉': [114.3896, 30.6628],
        '昆明': [102.9199, 25.4663],
        '杭州': [119.5313, 29.8773],
        '成都': [103.9526, 30.7617],
        '拉萨': [91.1865, 30.1465],
        '天津': [117.4219, 39.4189],
        '合肥': [117.29, 32.0581],
        '呼和浩特': [111.4124, 40.4901],
        '哈尔滨': [127.9688, 45.368],
        '北京': [116.4551, 40.2539],
        '南京': [118.8062, 31.9208],
        '南宁': [108.479, 23.1152],
        '南昌': [116.0046, 28.6633],
        '乌鲁木齐': [87.9236, 43.5883],
        '上海': [121.4648, 31.2891],
        '朔州': [112.43189,39.31982],
        '会泽': [103.30017,26.41076],
      };

      const data = [{
        name: '会泽',
        value: 2
      }, {
        name: '朔州',
        value: 190
      }, {
        name: '长春',
        value: 9
      }, {
        name: '长沙',
        value: 1
      }, {
        name: '贵阳',
        value: 2
      }, {
        name: '西安',
        value: 2
      }, {
        name: '深圳',
        value: 2
      }, {
        name: '济南',
        value: 5
      }, {
        name: '海口',
        value: 5
      }, {
        name: '沈阳',
        value: 6
      }, {
        name: '武汉',
        value: 6
      }, {
        name: '昆明',
        value: 4
      }, {
        name: '杭州',
        value: 6
      }, {
        name: '成都',
        value: 4
      }, {
        name: '拉萨',
        value: 6
      }, {
        name: '天津',
        value: 8
      }, {
        name: '合肥',
        value: 5
      }, {
        name: '呼和浩特',
        value: 5
      }, {
        name: '哈尔滨',
        value: 9
      }, {
        name: '北京',
        value: 6
      }, {
        name: '南京',
        value: 5
      }, {
        name: '南宁',
        value: 8
      }, {
        name: '南昌',
        value: 4
      }, {
        name: '乌鲁木齐',
        value: 4
      }, {
        name: '上海',
        value: 7
      }];

      function formtGCData(geoData, data, srcNam, dest) {
        var tGeoDt = [];
        if (dest) {
          for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam !== data[i].name) {
              tGeoDt.push({
                coords: [geoData[srcNam], geoData[data[i].name]]
              });
            }
          }
        } else {
          for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam !== data[i].name) {
              tGeoDt.push({
                coords: [geoData[data[i].name], geoData[srcNam]]
              });
            }
          }
        }
        return tGeoDt;
      }

      function formtVData(geoData, data, srcNam) {
        var tGeoDt = [];
        for (var i = 0, len = data.length; i < len; i++) {
          var tNam = data[i].name
          if (srcNam !== tNam) {
            tGeoDt.push({
              name: tNam,
              value: geoData[tNam]
            });
          }

        }
        tGeoDt.push({
          name: srcNam,
          value: geoData[srcNam],
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'red',//中心点颜色
              borderColor: '#ffffff'
            }
          }
        });
        return tGeoDt;
      }

      //var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
      const planePath = 'arrow';

      let option = {

        // backgroundColor: '#ffffff',//图片背景
        tooltip: {
          trigger: "item"
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          silent: true,
          top: "10%", // 调整地图位置
          bottom: "10%",
          left: "10%",
          right: "10%", // 调整地图位置
          itemStyle: {
            normal: {
              areaColor: "#ffffff",
              borderColor: "#000"
            }
          }
        },
        title: {
          text: "山西工学院学生返校迁移",
          left: "center", // 调整标题位置
          top: "5%", // 调整标题位置
          textStyle: {
            color: "#000",
            fontSize: 16, // 调整标题字体大小
            textShadowBlur: 10
          }
        },
        grid: {
          top: "20%", // 调整图例位置
          left: "20px",
          right: "20px",
          bottom: "20%", // 调整图例位置
          backgroundColor: "#fff",
          width: "auto",
          height: "auto" // 调整图例高度自适应
        },
        series: [{

          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.1,
            color: '#000000',//箭头颜色
            symbol: planePath,
            symbolSize: 8
          },
          lineStyle: {
            normal: {
              color: '#000000',//线颜色
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: formtGCData(geoCoordMap, data, '朔州', true)//出发城市
        },
          {

            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.1,
              color: '#000000',//箭头颜色
              symbol: planePath,
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                color: '#000000',//拖尾颜色
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: formtGCData(geoCoordMap, data, '朔州', false)//到达地点
          },
          {

            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              scale: 2.5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: '#000000',//城市点颜色
                borderColor: '#ffffff'
              }
            },

            data: formtVData(geoCoordMap, data, '朔州')//中心点红色
          }]
      };
      this.chartInstance.setOption(option);
    },
  }
};
</script>

<style scoped>
</style>
